<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
	<style type="text/css">
		li{
			text-indent: 3em;
			list-style: none;
		}
	</style>
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow" v-cloak>
			<div class="Table" v-cloak id="top">
				<div class="TableRow" v-for="(el,index) in list">
					<a class="RowLeft" :href="'#'+el.id">{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4 id="defaultView">beforeunload</h4>
				<p>
					onbeforeunload在onunload之前执行，onunload是无法阻止页面的更新和关闭的，它还可以阻止onunload的执行。
					事件调用包括：页面刷新或关闭、正要去服务器读取新的页面、
				</p>
				<ul>
					<li>页面加载时只执行onload </li>
					<li>页面关闭时先执行onbeforeunload，最后onunload </li>
					<li>页面刷新时先执行onbeforeunload，然后onunload，最后onload</li>
				</ul>
				<pre>
	//  在用户点击刷新提示				
	window.addEventListener('beforeunload',(e)=>{
		e=window.event||e
		e.preventDefault()
		e.returnValue=false
		// 或  e.returnValue='正在离开页面'
	},false)			
				</pre>
			</div>
			<div>
				<h4 id="scrollingElement">popstate</h4>
				<p>
				监听浏览器前进或后退	
				</p>
				<pre>
	window.addEventListener('popstate',(e)=>{
		e=window.event||e
		e.preventDefault()
		history.pushState(null,null,document.URL)//取消前进后退
		TODO.....
	},false)
			
			
					
	参数：
	const state = { 'page_id': 1, 'user_id': 5 }
	const title = ''
	const url = 'hello-world.html'
	history.pushState(state, title, url)				
					
					
	const url = new URL(window.location);
	url.searchParams.set('foo', 'bar');
	window.history.pushState({}, '', url);				
				</pre>
			</div>
			<div>
				<h4 id="activeElement">activeElement</h4>
				<p>
				 	
				</p>
			</div>
			<div>
				<h4 id="fullscreenElement">fullscreenElement</h4>
				<p>
				 	
				</p>
				<pre>
	 		
				</pre>
			</div>
			<div>
				<h4 id="domain">domain</h4>
				<p>
				
				</p>
			</div>
			<div>
				<h4 id="location">location</h4>
				<p>
				document.location
				Location对象是浏览器提供的原生对象，
				提供 URL 相关的信息和操作方法。
				通过window.location和document.location属性，
				可以拿到这个对象
				</p>
			</div>
			<div>
				<h4 id="lastModified">lastModified</h4>
				<p>
				document.lastModified
				当前文档最后修改的时间。
				不同浏览器的返回值，日期格式是不一样的。	
				</p>
				<pre>
	document.lastModified
	
	"12/22/2020 15:44:47"
	
	var lastVisitedDate = Date.parse('01/01/2018');
	if (Date.parse(document.lastModified) > lastVisitedDate) {
	  console.log('网页已经变更');
	}			
				</pre>
			</div>
			<div>
				<h4 id="createEvent">createEvent</h4>
				<p>
				document.createEvent()
				方法生成一个事件对象（Event实例），
				该对象可以被element.dispatchEvent方法使用，
				触发指定事件。
				</p>
				<pre>
	var event = document.createEvent('Event');
	event.initEvent('build', true, true);
	document.addEventListener('build', function (e) {
	  console.log(e.type); // "build"
	}, false);
	document.dispatchEvent(event);
	
	// 触发事件
	var event = new Event('click');
	document.dispatchEvent(event);			
				</pre>
			</div>
			<div>
				<h4 id="hasFocus">hasFocus</h4>
				<p>
				document.hasFocus()
				返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
				有焦点的文档必定被激活（active），
				反之不成立，激活的文档未必有焦点。
				比如，用户点击按钮，从当前窗口跳出一个新窗口，
				该新窗口就是激活的，但是不拥有焦点。
				</p>
				<pre>
	var focused = document.hasFocus();		
				</pre>
			</div>
			<div>
				<h4 id="getSelection">getSelection</h4>
				<p>
				selection代表了当前激活选中区，即高亮文本块，
				和/或文档中用户可执行某些操作的其它元素
				</p>
				<pre>
	document.selection : IE
	window.getSelection() ：Chrome、Safari、FireFox		
	
	var selectionObj = window.getSelection();
	var rangeObj = selectionObj.getRangeAt(0);//rangeObj为Range对象
　　var selectedText = selectionObj.toString();//用户选中区域的文本

	var docFragment = rangeObj.cloneContents();
	如果想获取选中部分的html代码，就需要用到Range对象的cloneContents方法，
	cloneContents方法把Range对象的内容复制到一个DocumentFragment对象。
	var testDiv = document.createElement("div");
　　 testDiv.appendChild(docFragment);
　　 var selectHtml = testDiv.innerHTML;//用户选中区域的html代码
				</pre>
			</div>
			<div>
				<h4 id="other">其他</h4>
				<p>
				</p>
				<pre>
	document.open() // 将当前文档重置	 常配合下面API
	document.write('hello world') //整个页面只显示  hello world
	document.close()
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function() {
				return {
					list: [
						{ name: "beforeunload",id: "defaultView",explain: '页面刷新或后退'},
						{ name: "popstate",id: "scrollingElement",explain: '监听页面历史前进后退'},
						// { name: "activeElement",id: "activeElement",explain: ''},
						// { name: "fullscreenElement",id: "fullscreenElement",explain: ''},
						// { name: "domain",id: "domain",explain: ''},
						// { name: "location",id: "location",explain: ''},
						// { name: "lastModified",id: "lastModified",explain: 'HTML页面最终修改的时间'},
						// { name: "createEvent",id: "createEvent",explain: '创建事件'},
						// { name: "hasFocus",id: "hasFocus",explain: '获取激活的元素'},
						// { name: "getSelection",id: "getSelection",explain: '获取光标选中'},
						// { name: "其他",id: "other",explain: 'open、write、close'},
					]
				}
			},
			mounted() {
			}
		})
	</script>
</body>

</html>